<template>
	<view class="count" :style="{'--color':vuex_config.themeColor1}" v-if="show">
		<view class="left">
			<view class="time-box">{{ timeObj.day || '00' }}</view>
			<view class="u-p-l-10 u-p-r-10">天</view>
			<view class="time-box">{{ timeObj.hours || '00' }}</view>
			<view class="u-p-l-10 u-p-r-10">时</view>
			<view class="time-box">{{ timeObj.minute || '00' }}</view>
			<view class="u-p-l-10 u-p-r-10">分</view>
			<view class="time-box">{{ timeObj.second || '00' }}</view>
			<view class="u-p-l-10 u-p-r-10">秒</view>
		</view>
		<view class="right u-m-l-18">{{prodState.msg || '活动已结束'}}</view>
	</view>
</template>

<script>
	import {
		downTime
	} from './downTime.js'
	export default {
		mixins: [downTime],
		props: {
			start: {
				type: Number,
				default: 0
			},
			end: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				show: false
			}
		},
		beforeDestroy() {
			if (this.time) {
				clearTimeout(this.time);
			}
		},
		methods: {
			init() {
				this.show = true
				this.getStatus(this.start, this.end)
			},
			downFinish() {
				this.$emit('needInit');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.count {
		width: 100%;
		height: 130rpx;
		display: flex;
		align-items: center;
		padding: 0 26rpx;
		background-color: #E8202D;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;
			color: #fff;

			.time-box {
				min-width: 66rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				background-color: #A41E1B;
				justify-content: center;
			}
		}

		.right {
			width: 210rpx;
			height: 68rpx;
			background: linear-gradient(93deg, #F9E680, #ECDA79);
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #A41E1B;
			font-weight: bold;
			font-size: 30rpx;
		}
	}
</style>
